<template>
  <el-radio-group v-model="sortValue" @change="changeSelect" v-if="isSupport">
    <el-radio v-for="item in optionArr" :key="item.value" :label="item.value">{{
      item.label
    }}</el-radio>
  </el-radio-group>
  <el-switch
    v-model="sortValue"
    active-text="是"
    inactive-text="否"
    v-else-if="isSwitch"
    @change="changeSelect"
  >
  </el-switch>
  <el-select
    v-model="sortValue"
    :multiple="multiple"
    @change="changeSelect"
    :disabled="isDisabled"
    :style="widths==1?'width:80px':'width:135px'"
    :clearable="widths==1?false:true"
    v-else
  >
    <el-option
      v-for="item in optionArr"
      :key="item.value"
      v-show="!item.hidden"
      :label="item.label"
      :value="isTrain ? item.label : item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "SortingSelector",
  props: {
    selectValue: [String, Number, Array],
    selectId: [String, Number],
    widths: [String, Number],
    options: Array,
    selectCode: String,
    requestUrl: String,
    isSupport: Boolean,
    isSwitch: Boolean,
    isTrain: Boolean,
    isFromSite: Boolean, // 是不是出发站点
    supplementHoursMinutes: String, // 出发站点的时分
    isStart: Boolean,
    isEnd: Boolean,
    isDisabled: Boolean,
    multiple: { type: Boolean, default: false },
    isKpi: Boolean
  },
  data() {
    return {
      sortValue: "",
      optionArr: []
    };
  },
  methods: {
    changeSelect(val) {
      this.$emit("update:selectValue", val);
      if (this.isFromSite) {
        this.$emit(
          "update:supplementHoursMinutes",
          this.optionArr.find(res => res.label == val).time
        );
        this.$emit(
          "on-day-diff",
          this.optionArr.find(res => res.label == val).dayDiff,
          this.optionArr.find(res => res.label == val).time
        );
      }
      if (this.isTrain) {
        this.$emit(
          "update:selectId",
          this.optionArr.find(res => res.label == val).value
        );
      }
      if (this.isKpi) {
        this.$emit(
          "update:selectId",
          this.optionArr.find(res => res.value == val).label
        );
      }
    }
  },
  watch: {
    selectValue: {
      immediate: true,
      handler(val) {
        if (this.isSwitch) {
          this.sortValue = val == 1 ? true : false;
        } else {
          this.sortValue = val;
        }
      }
    },
    options: {
      immediate: true,
      handler(val) {
        this.optionArr = val;
      }
    },
    sortValue(val) {
      if (val) {
        this.$emit("update:selectValue", val);
      } else {
        this.$emit("update:selectValue", this.selectValue);
      }
    }
  }
};
</script>
